@import '../../common/styles/theme/default.less';

.navWraper {
  position: fixed;
  bottom: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  width: 100%;
  height: 98px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(244, 244, 244, 1);

  .navItem {
    flex: 1;
    color: @font-color-third;
    font-weight: 600;
    font-size: 24px;
    line-height: 34px;
    text-align: center;

    i {
      display: inline-block;
      width: 44px;
      height: 44px;
    }

    .home {
      background: url('../../assets/images/home.png') no-repeat center bottom / 100%;
    }

    .mine {
      background: url('../../assets/images/mine.png') no-repeat center bottom / 100%;
    }
  }

  .active {
    color: @brand-primary;

    .home {
      background: url('../../assets/images/home-active.png') no-repeat center bottom / 100%;
    }

    .mine {
      background: url('../../assets/images/mine-active.png') no-repeat center bottom / 100%;
    }
  }
}
